<template>
    <div class="step1_container">
        <div class="step1_top">
            <div class="title">
                <h4>本次发布的产品类型</h4>
            </div>
            <div class="tool">
                <!-- <el-input v-model="queryParams.inner" placeholder="请输入搜索内容" prefix-icon="el-icon-search" clearable
                    style="width: 200px; margin: 0 10px;" @keyup.enter.native="handleQuery" />
                <span>
                    <el-checkbox v-model="checked1">全选(全不选)</el-checkbox>
                    <el-checkbox v-model="checked2">仅查看选择的</el-checkbox>
                </span> -->
            </div>
        </div>
        <div class="step1_main">
            <div class="main_left">
                <!-- <p class="active">手机壳</p>{{ checkboxGroup1 }} -->
                <el-checkbox-group v-model="catld" class="checkbox_class">
                    <el-checkbox-button v-for="(item, index) in productList" :label="item.catId" :key="index">{{
                        item.catName }}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <div class="main_right">

                <el-radio-group v-model="shopValue">
                    <div v-for="(item, index) in shopList">
                        <el-radio :key="index" :label="item.id"
                            style="display: block; height: 50px; line-height: 50px;">{{ item.shopName }}</el-radio>
                    </div>
                </el-radio-group>
                <!-- <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="(item, index) in shopList" :key="index" :label="item.id"
                        style="display: block; height: 50px; line-height: 50px;"> {{ item.shopName }}</el-checkbox>
                </el-checkbox-group> -->
                <!-- <el-radio-group v-model="radio1">
                    <el-radio-button v-for="(item, index) in  shopList" :key="index" :label="item.id">{{ item.shopName }}</el-radio-button>
                </el-radio-group> -->
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrUserShopAllData, getCurrentCommodityCategory } from "@/api/product/productInfo";
export default {
    data() {
        return {
            shopValue: '',
            checkList: [],
            shopList: [],
            productList: [],
            catld: [],
            checked1: false,
            checked2: false,
            accessToken: '',
            shopId: '',
            queryParams: {
            }
        }
    },
    props: {
        releaseItem: {
            type: Object,
            default: {}
        }
    },
    watch: {
        shopValue(val) {
            if (val) {
                this.accessToken = this.shopList.filter(item => item.id == val)[0].accessToken
                this.shopId = this.shopList.filter(item => item.id == val)[0].shopId
            }
        },
        accessToken(val) {
            this.getCurrentCommodityCategory()
        }
    },
    mounted() {
        this.getCurrUserShopAllData()
        // this.getCurrentCommodityCategory()
    },
    methods: {
        getCurrUserShopAllData() {
            getCurrUserShopAllData().then(res => {
                this.shopList = res.value
            })
        },
        getCurrentCommodityCategory() {
            const name = '手机保护套/壳'
            getCurrentCommodityCategory(name, this.accessToken, this.shopId).then(res => {
                this.productList = [res.value]
            })
        },
        handleEmitData() {
            if(this.catld.length == 0 || !this.shopValue) {
                this.$message.error('请选择店铺或选择将要发布的产品')
                return false
            }
            let releaseShopName = []
            
            this.shopList.forEach(item => {
                if (item.id == this.shopValue)
                    releaseShopName.push(item.shopName)
                // this.checkList.forEach(dom => {
                //     if (item.id == dom) {
                //     }
                // })
            })
            this.$emit('send', {
                accessToken: this.accessToken,
                shopId: this.shopId,
                common: {
                    shopId: this.shopId,
                    releaseShopName: releaseShopName.join(),
                    repositoryId: this.releaseItem.id,
                    catId: this.catld.join(),
                }
            });
            return true
        },
        handleQuery() {

        }
    }
}
</script>

<style lang="scss" scope>
.step1_container {
    .step1_top {
        display: flex;

        .title,
        .tool {
            flex: 1;
            padding: 0 20px;
            line-height: 50px;
            height: 50px;
            margin: 0 10px;
            border-bottom: 1px solid #ccc;
        }

        .title {
            h4 {
                color: steelblue;
                font-size: 24px;
                font-weight: bold;
                margin: 0;
            }
        }

    }

    .checkbox_class {
        display: block;
        width: 100%;
        margin: 10px 0;

        .el-checkbox-button {
            display: block;
            width: 100%;
        }

        .el-checkbox-button__inner {
            display: block;
            width: 100%;
        }
    }

    .step1_main {
        display: flex;

        .main_left,
        .main_right {
            flex: 1;
            margin: 0 10px;
        }

        .main_left {
            p.active {
                background-color: #008080;
                font-weight: bold;
                font-size: 24px;
                color: #fff;
                padding: 10px;
                border-radius: 5px;
                cursor: pointer;
            }
        }

        .main_right {}
    }
}
</style>